<template>
  <div class="service-feedback-main">
    <div class="return-msg">
      <p><span>退货单号：</span>4646461461651561616</p>
      <p><span>申请时间：</span>2017-05-20 18:00:00</p>
    </div>
    <div class="productbar clear">
      <img src="" class="fl"/>
      <div class="product-msg fl">
        <p class="product-name">乐町2017夏季新款女装绿色短款刺绣宽松短袖宽松宽松短袖T恤女夏韩版纯色上衣</p>
        <p class="return-num clear"><span class="fl">1件</span><span class="fl">退货退款</span></p>
      </div>
    </div>
    <div class="feedback-reason">
      <img src="../assets/image/pic-_-lose@2x.png"/>
      <p class="sorry">抱歉，售后申请未通过</p>
      <p class="reason"><span>未通过原因：</span>商家拒绝了您的售后申请</p>
    </div>
    <div class="connet">联系客服</div>
  </div>
</template>
<script>
  import Vue from 'vue'

  export default {
    data () {
      return {

      }},
    name: 'app',
    methods: {}
  }
</script>
<style lang="scss">
  .service-feedback-main{
    .return-msg{
      padding: 0.3rem; background: #fff; border-top: 0.2rem solid #f4f5f5;
      p{
        height:0.32rem; font-size:0.32rem; line-height:0.32rem; color:#151517;
        +p{margin-top: 0.32rem;}
        span{height:0.32rem; font-size: 0.28rem; line-height: 0.32rem; color: #333;}
      }
    }
    .productbar{
      padding: 0.2rem 0.3rem; background: #fff; border-top: 0.2rem solid #f4f5f5;
      img{display: block; width: 1.34rem; height: 1.34rem; margin-right: 0.16rem;}
      .product-msg{
        .product-name{ width: 5.36rem; font-size: 0.24rem; line-height: 0.36rem; color: #333; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
        .return-num{
          margin-top:0.36rem;
          span{
            display: block; font-size: 0.24rem; line-height: 0.24rem; color: #ff365d;
            +span{ margin-left: 0.4rem;}
          }
        }
      }
    }
    .feedback-reason{
      width: 100%; background: #fff; border-top: 0.2rem solid #f4f5f5;
      img{display: block; width: 2rem; height: 2.28rem; margin: 0.34rem auto 0.7rem;}
      .sorry{font-size: 0.32rem; line-height: 0.32rem; text-align:center; color: #151517;}
      .reason{
        padding: 0.28rem 0 0.78rem 0; font-size: 0.24rem; text-align: center; line-height: 0.24rem; color: #151517;
        span{font-size: 0.24rem; line-height: 0.24rem; color: #333;}
      }
    }
    .connet{ position:fixed; left:0; bottom:0; width: 100%; height: 0.88rem; font-size: 0.28rem; line-height: 0.88rem; text-align: center; color: #fff; background: linear-gradient(to right,#fe4a6b,#e8163f);}
  }
  </style>
